{extend name="tpl/site_0/default/pc/public/layout.html" /}
{block name='title'}领券中心{$webConfig.WEBNAME}{/block}
{block name='head'}
{/block}
{block name='body'}
<div class="pro-nav" id="nav">
    <div class="weui-flex">
        <div class="weui-flex__item"><a onclick="setOrder('unused',this)">可用优惠券</a></div>
        <div class="weui-flex__item"><a onclick="setOrder('used',this)">已用优惠券</a></div>
        <div class="weui-flex__item"><a onclick="setOrder('expire',this)">过期优惠券</a></div>
    </div>
</div>
<div class="pro-listb">
    <div class="weui-flex">
        <div class="weui-flex__item" id="list">
        </div>
    </div>
    <div style="height: 50px;"></div>

</div>
{/block}
{block name="script"}
<script src="/public/plugins/dropload/dropload.js"></script>
<script src="/public/plugins/template/template.js"></script>
<script type="text/html" id="list-tpl">
    {{each data as value index}}
    <div class="prolist-box" >
        <div onclick="$(this).next().toggle()">
            <img src="{{ value.card_image}}" alt="">
            <h2 class="title">{{ value.title}}</h2>
            {{ if value.send_type==2}}
            <div>￥<span class="price">{{ value.sale_money}}</span>元</div>
            {{ else}}
            <div><span class="price">免费</span></div>
            {{ /if}}
        </div>
        <div class="direction" style="display: none">
            {{ value.direction}}
            <div class="">
                {{ if value.status}}
                <a class="weui-btn weui-btn_mini weui-btn_primary" href="{:url('sendCard')}?card_id={{ value.card_id}}">领取</a>
                {{ else}}
                <a class="weui-btn weui-btn_mini weui-btn_primary weui-btn_disabled">已领取</a>
                {{ /if}}
            </div>
        </div>
    </div>
    {{/each}}
</script>
<script>
    var data = {
        page: 0,
        type: 'unused'//unused未使用且可用 expire未使用已过期 used已使用
    };

    var drop = $('#page').dropload({  //定义检测的容器
        scrollArea: window,
        loadDownFn: function (me) {		//loadDownFn是检测是否加载下方，其余方向请到文档中查看
            data.page++;			//每次都需要将页码加1
            // 拼接HTML
            $.ajax({
                type: 'POST',
                url: '{:url("index")}', data: data, success: function (datas) {
                    if (datas.code == 0) {
                        layer.open({
                            content: datas.msg
                            , skin: 'msg'
                            , time: 2 //2秒后自动关闭
                        });
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    var html = template('list-tpl', datas);		//此处使用的是上章节介绍的模板引擎
                    $('#list').append(html);		//将生成好的html插入放置列表的容器内
                    if (data.page >= datas.last_page) {		//检测是否加载到最后一页
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    me.resetload();			//这句必须写
                }
            });

        }
    });
    function setOrder(type, obj) {
        data.page = 0;
        data.type = type;
        $(obj).addClass('active').siblings().removeClass('active');
        $('#list').empty();
        drop.unlock();
        drop.noData(false);
        drop.resetload();
    }
</script>
{/block}